<template>
  <div class="bar">
    <div class="topBar">
      <div class="left same"></div>
      <div class="middle same"></div>
      <div class="right">
        <div class="first same"></div>
        <div class="last same"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'LoginTopBar',
})
</script>

<script lang="ts" setup></script>

<style scoped lang="scss">
.bar {
  width: 100%;
  height: 44px;
  .topBar {
    position: relative;
    width: 100%;
    height: 44px;
    padding: 10px 10px;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    .same {
      background-image: url(https://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/hd-sfa8ad70b41-44d9a584e7.png?imageView&type=webp);
    }
    .left {
      width: 35px;
      height: 25px;
      background-size: 90px 190px;
      background-position: 0 -30px;
    }
    .middle {
      width: 86px;
      height: 27px;
      margin: auto;
      line-height: 35px;
      background-size: 90px 190px;
      background-position: 0 -60px;
      position: absolute;
      top: 10px;
      right: 0;
      bottom: 0;
      left: -10px;
      margin: auto;
    }
    .right {
      position: relative;
      display: flex;
      width: 70px;
      height: 32px;
      margin-right: 10px;
      .first {
        position: absolute;
        top: 15%;
        left: 10%;
        width: 32px;
        height: 32px;
        background-size: 90px 190px;
        background-position: 0px -161px;
      }
      .last {
        position: absolute;
        top: 7%;
        left: 70%;
        width: 32px;
        height: 32px;
        background-size: 90px 190px;
        background-position: -2px 4px;
      }
    }
  }
}
</style>
